<style scoped lang="scss">
@import "../../css/list.scss";
.houses_info {
  padding-bottom: 0.6rem;
}
header {
  .swiper {
    height: 2rem;
  }
  li {
    height: 0.6rem;
    p {
      padding-top: 0.05rem;
    }
  }
}
main {
  .tit {
    height: 0.5rem;
    line-height: 0.5rem;
  }
  .houses {
    .houses_tit {
      height: 0.6rem;
      line-height: 0.6rem;
    }
    .houses_site {
      height: 0.5rem;
      line-height: 0.5rem;
    }
  }
  .supporting {
    padding: 0.07rem 0.15rem;
    li {
      padding: 0.08rem 0;
    }
  }
  .sale {
    padding: 0 0.15rem 0.15rem;
    ul {
      padding-bottom: 0.15rem;
      li {
        height: 0.42rem;
      }
    }
    .sale_img {
      height: 1.9rem;
    }
  }
  .dynamic {
    padding: 0 0.15rem;
    .dynamic_info {
      line-height: 0.16rem;
      p {
        padding: 0.04rem 0;
      }
    }
  }
  .chart {
    ul {
      padding: 0 0.07rem;
      overflow-x: auto;
      li {
        padding: 0 0.07rem 0.07rem;
        .img-bg {
          width: 1.2rem;
          height: 1.2rem;
        }
      }
    }
  }
}
footer {
  position: fixed;
  height: 0.6rem;
  bottom: 0;
  left: 0;
  & > div {
    &::before {
      top: 0;
    }
    & > div:first-child {
      width: 0.7rem;
    }
  }
}
.notes {
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  & > div {
    width: 2.4rem;
    height: 1.6rem;
    .tit {
      height: 0.42rem;
    }
    .info {
      padding: 0.15rem 0.1rem;
      line-height: 0.18rem;
    }
    .btns {
      display: flex;
      justify-content: space-between;
      padding: 0 0.1rem 0.2rem;
      .btn {
        width: 0.85rem;
        height: 0.35rem;
        background: #a2a2a2;
        &:last-child {
          background: #e22825;
        }
      }
    }
  }
}
.pup {
  width: 1rem;
  height: 0.3rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  margin: auto;
  z-index: 99999;
}
</style>

<template>
  <div class="houses_info">
    <header>
      <img :src="houseInfo.housesImgurl" class="w100" alt="">
      <!-- <div class="swiper img-bg" :style="{backgroundImage:`url(${houseInfo.housesImgurl})`}"></div> -->
      <ul class="flex-col bgfff">
        <li class="box1 box-center">
          <span>{{num.backup}}</span>
          <p>报备数</p>
        </li>
        <li class="box1 box-center position-r border-ll">
          <span>{{num.look}}</span>
          <p>已到访</p>
        </li>
        <li class="box1 box-center position-r border-ll">
          <span>{{num.sign}}</span>
          <p>已成交</p>
        </li>
      </ul>
    </header>
    <main>
      <!-- 楼盘信息 begin -->
      <div class="houses bgfff margin-tb10 padding-lr15">
        <div class="flex-col houses_tit">
          <div class="box1 font-20">{{houseInfo.housesName}}</div>
          <div class="cred font-16">佣金奖励：{{houseInfo.oneMoney}}</div>
        </div>
        <div class="flex-col houses_details" @click="toHouseInfo('houses_data')">
          <div class="box1">
            <div class="flex-col">
              <div class="box1">
                <span class="c82">建筑类型：</span>
                {{houseInfo.housesBulidType }}
              </div>
              <div class="box1">
                <span class="c82">产权年限：</span>
                {{houseInfo.housesPropertyYears }}
              </div>
            </div>
            <div class="flex-col padding-tb15">
              <div class="box1">
                <span class="c82">最新开盘：</span>
                {{houseInfo.housesSellTime | toTime('yyyy-MM-dd')}}
              </div>
              <div class="box1">
                <span class="c82">预计交房</span>
                {{houseInfo.housesCheckOut | toTime('yyyy-MM-dd')}}
              </div>
            </div>
          </div>
          <div class="padding-t15">
            <i class="iconfont icon-jiantou"></i>
          </div>
        </div>
        <div class="flex-col border-t houses_site">
          <i class="iconfont icon-dizhi"></i>
          <div class="box1 padding-l5">
            {{houseInfo.housesAddress }}
          </div>
          <!-- <i class="iconfont icon-jiantou"></i> -->
        </div>
      </div>
      <!-- 楼盘信息 end -->

      <!-- 销售情况 begin -->
      <!-- <div class="sale bgfff padding-lr15">
        <div class="font-16 tit">小区销售情况</div>
        <ul class="flex-col">
          <li class="box1 flex-row">
            <div class="font-12 box1">本月销售情况</div>
            <div class="cred font-16">236套</div>
          </li>
          <li class=" position-r border-ll box1 box-center">
            <div class="font-12 c82">比上月</div>
            <div class="padding-t10">
              <i class="iconfont icon-dingbu"></i>2.15%
            </div>
          </li>
          <li class=" position-r border-ll box1 box-center">
            <div class="font-12 c82">比去年</div>
            <div class="padding-t10">
              <i class="iconfont icon-dingbu"></i>2.15%
            </div>
          </li>
        </ul>
        <div class="sale_img img-bg">

        </div>
      </div> -->
      <!-- 销售情况 end -->

      <!-- 楼盘卖点、佣金标准 begin -->
      <div class="bgfff padding-lr15 margin-t10">
        <div class="font-16 tit">项目卖点</div>
        <div class="padding-b15">{{houseInfo.housesDescribe}}</div>
      </div>
      <div class="bgfff padding-lr15 margin-t10">
        <div class="font-16 tit">佣金标准</div>
        <ul>
          <li class="padding-b10">100万以下，佣金
            <span class="cred">{{houseMoney.oneDes || ''}}元</span>
          </li>
          <li class="padding-b10">100万-200万，佣金
            <span class="cred">{{houseMoney.twoDes}}元</span>
          </li>
          <li class="padding-b10">200万-500万，佣金
            <span class="cred">{{houseMoney.threeDes}}元</span>
          </li>
          <li class="padding-b15">500万以上，佣金
            <span class="cred">{{houseMoney.fourDes}}元</span>
          </li>
        </ul>
      </div>
      <!-- 楼盘卖点、佣金标准 end -->

      <!-- 楼盘动态 begin -->
      <div class="dynamic bgfff margin-t10" @click="toRouter('houses_dynamic/'+houseInfo.housesCode)">
        <div class="tit flex-col">
          <div class="font-16 box1">楼盘动态（{{totalPageList}}）</div>
          <div class="c82 flex-col flex-middle">查看全部
            <i class="iconfont icon-jiantou"></i>
          </div>
        </div>
        <div class="dynamic_info padding-b20" v-for="(it,i) in dynamicList" :key="i">
          <div>{{it.dynamicTitle}}</div>
          <p class="c82 font-12">{{it.dynamicDescribe}}</p>
          <div class="c82 font-12">{{it.createTime | toTime('yyyy年MM月dd日')}}</div>
        </div>
      </div>
      <!-- 楼盘动态 end -->

      <!-- 户型图 begin -->
      <div class="chart margin-t10 bgfff">
        <div class="tit font-16 padding-l15">户型图</div>
        <ul class="flex-col">
          <li v-for="(it,i) in houseImgs" :key="i">
            <div class="img-bg" :style="{backgroundImage:`url(${it.housesImgUrl})`}"></div>
            <div class="box-center padding-tb15">
              <div class="padding-b10">{{it.direction}}</div>
              <span class="font-12 c82">{{it.size}}</span>
            </div>
          </li>
        </ul>
        <div class="padding-15 c82" v-show="!houseImgs.length">暂无数据</div>
      </div>
      <!-- 户型图 end -->

      <!-- 周边配套 begin -->
      <ul class="supporting padding-lr15 margin-t10 bgfff">
        <li class="font-16">周边配套</li>
        <li>地铁：
          <span>{{houseInfo.subway}}</span>
          <!-- <span>地铁1号线</span>
          <span>地铁5号线</span> -->
        </li>
        <li>学校：
          <span>{{houseInfo.school}}</span>
        </li>
        <li>周边：
          <span>{{houseInfo.housesDescribe}}</span>
        </li>
      </ul>
      <!-- 周边配套 end -->

      <!-- 附近楼盘 begin -->
      <div class="nearbg_houses bgfff padding-t20 margin-t10">
        <div class="padding-l15 font-16">附近楼盘</div>
        <ul class="index_list padding-lr15 bgfff">
          <li class="flex-col border-b" v-for="(it,i) in houseList" data-id="housesCode" :key="i" @click="reload(it.housesCode)">
            <div class="it_bg img-bg" :style="{backgroundImage:`url(${it.housesImgurl})`}"></div>
            <div class="it_info box1">
              <div class="padding-b10">{{it.housesName}}</div>
              <div class="font-12 c82 padding-b5 ">参考价格：￥{{it.housesPrice}}</div>
              <div class="font-12 c82 padding-b10 box-space">住宅类型：{{it.housesBulidType}}
                <span class="cred">1.6km</span>
              </div>
              <div class="btn cred" @click.stop>
                <i class="iconfont icon-dianhua1"></i>
                <a :href="'tel:'+it.housesPhone" class="cred text-none">{{it.housesPhone}}</a>
              </div>
            </div>
          </li>
          <li class="padding-20 c82 box-center" v-if="!houseList.length">暂无数据</li>
        </ul>
      </div>
      <!-- 附近楼盘 end -->
    </main>

    <footer class="flex-col bgfff position-f full box-sizing">
      <div class="full border-t flex-col padding-lr5 ">
        <div class="c82 box-center" @click="addHousescollect">
          <i class="iconfont icon-shoucang1 margin-b5 font-18" :class="{'icon-shoucang2':num.has}"></i>
          收藏
        </div>
        <div class="box1 padding-tb5">
          <div class="full bgred cfff bor-r box-center" @click="setShowPicker">我要报备</div>
        </div>
        <div class="box1 padding-5">
          <div class="full bgred cfff bor-r box-center bgf4" @click="extendCode">我要推广</div>
        </div>
      </div>
    </footer>

    <!-- 报备 begin -->
    <div class="position-f notes full box-center" v-show="notes" @click="cutHotes">
      <div class="bgfff bor-r5 padding-lr10 box-sizing flex-row" @click.stop>
        <div class="tit box-center border-b">提示</div>
        <div class="info box1 padding-lr10">
          <div class="text">该楼盘已被报备，需等10天缓冲时期，谢谢！</div>
        </div>
        <div class="btns">
          <div class="btn bor-r cfff box-center bgred " @click="cutHotes">取消报备</div>
          <div class="btn bor-r cfff box-center bgred " @click="addSave">继续报备</div>
        </div>
      </div>
    </div>
    <!-- 报备 end -->

    <!-- 选择报备客户 begin -->
    <div class="make_slots position-f flex-row full" v-show="showPicker">
      <div class="box1"></div>
      <transition-group enter-active-class="bounceInUp" class="make_box w100" leave-active-class="bounceInDown">
        <div class="box-space tit bgfff w100 animated" v-show="showPicker" :key="1">
          <div class="padding-lr15" @click="showPicker = false">取消</div>
          <div class="padding-lr15" @click="openPicker">确定</div>
        </div>
        <mt-picker :slots="slots" v-show="showPicker" :key="2" class="picker w100 animated" @change="onValuesChange"></mt-picker>
      </transition-group>
    </div>
    <!-- 选择报备客户 end -->

    <!-- 报备预约时间选择 begin -->
    <mt-datetime-picker ref="picker" v-model="pickerValue" year-format="{value}年" month-format="{value}月" date-format="{value}日" hour-format="{value}时" minute-format="{value}分" :startDate="startDate" @confirm="hasSave"></mt-datetime-picker>
    <!-- 报备预约时间选择 end -->

    <div class="pup box-center font-14 bor-r" v-show="hasTime">看房预约时间</div>

  </div>
</template>

<script>
import { Picker, DatetimePicker } from "mint-ui";

const wx = require("weixin-js-sdk");
import CONFIG from "../../js/CONFIG.js";
export default {
  naem: "",
  data() {
    return {
      hasTime: false,
      houseCode: null,
      userCode: null,
      userName: null,
      startDate: new Date(),
      houseList: [], // 附近楼盘
      notes: false,
      houseInfo: {},
      houseMoney: {
        oneDes: null,
        twoDes: null,
        threeDes: null,
        fourDes: null
      },
      num: {},
      dynamicList: [], //楼盘动态列表
      totalPageList: "", //楼盘动态总条数
      clientList: [], //报备客户列表
      client: {}, //报备客户信息
      pickerValue: null, //报备预约时间
      showPicker: false, //需选择报备人状态显示
      // showDate: false,
      slots: [
        {
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "center"
        }
      ],
      houseImgs: [] //楼盘户型图
    };
  },
  watch: {
    showPicker(val) {
      if (val && !this.clientList) {
        this.showPicker = false;
        thia.layer("请先添加客户");
      }
    },
    pickerValue(val) {
      console.log(val);
    }
  },
  components: {
    "mt-picker": Picker,
    "mt-datetime-picker": DatetimePicker
  },
  created() {
    // 是否需要授权
    let url = window.location.href.split("houses_info?")[1];
    let obj = this.getRequest(url);
    if (!this.getCache("token") || this.getCache("token") == "undefined") {
      this.JumpToWeCaht(obj["userCode"], obj["houseCode"]);
    } else {
      let that = this,
        id = that.$route.query.houseCode;
      this.userCode = that.$route.query.userCode;

      // 扫码进入（绑定上下级关系）
      if (obj["qrCode"]) {
        id = obj["houseCode"];
        this.bindingUser(obj["userCode"]);
      }

      // this.$nextTick(() => {
      that.http.all([
        that.getHouseInfo(id), //楼盘详情
        that.getList(id), // 获取楼盘动态
        that.getClientList(), //请求客户列表
        that.getHouseImgs(id), //获取户型图
        that.getHouseList() // 附近楼盘
      ]);
    }
    // });
  },
  computed: {
    city() {
      return this.$store.state.commonStore.city;
    },
    point() {
      return this.$store.state.commonStore.point;
    }
  },
  mounted() {
    // let that = this,
    //   id = that.$route.params.id;
    // this.$nextTick(() => {
    //   that.http.all([
    //     that.getHouseInfo(id), //楼盘详情
    //     // that.getList(id), // 获取楼盘动态
    //     // that.getClientList(), //请求客户列表
    //     // that.getHouseImg(id) //获取户型图
    //   ]);
    // });
  },
  methods: {
    JumpToWeCaht(userCode = 0, houseCode = 0) {
      let THIS = this;
      let returnURL = CONFIG.WeChat.WeChatOauth;

      // THIS.setLCDATABEFORELOGO();

      let _uid = this.$route.query.yqid || 1;
  
      window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        CONFIG.WeChat.appid +
        "&redirect_uri=" +
        returnURL +
        "&response_type=code&scope=snsapi_userinfo&state=" +
        _uid +'|'+houseCode+'|'+userCode
        "#wechat_redirect";// 由于后台接收不到url参数,所以此处使用'|'供后台处理，然后在登录页根据houseCode重定向，返回到本页
        
    },
    reload(id) {
      let that = this;
      window.scrollTo(0, 0);
      that.http.all([
        that.getHouseInfo(id), //楼盘详情
        that.getList(id), // 获取楼盘动态
        that.getClientList(), //请求客户列表
        that.getHouseImgs(id), //获取户型图
        that.getHouseList() // 附近楼盘
      ]);
    },
    // 打开选择预约时间
    openPicker() {
      this.showPicker = false;
      // this.showDate = true;
      //  this.layer("看房预约时间");
      this.hasTime = true;
      this.$refs.picker.open();
      let that = this;
      setTimeout(() => {
        that.hasTime = false;
      }, 2000);
    },
    //添加客户报备前  是否有客户信息
    setShowPicker() {
      if (this.userCode) {
        // 用户匹配的房源，直接选择时间
        this.openPicker();
      } else {
        if (!this.clientList.length) {
          this.layer("请先添加您的客户");
          return;
        }
        this.layer("选择报备客户");
        this.showPicker = true;
      }
    },
    // 楼盘详情
    getHouseInfo(id) {
      let that = this;
      this.http
        .get("houses/info/" + id)
        .then(res => {
          that.houseInfo = res.data.tbHouses;
          if(res.data.tbCommissionRuleEntity){
            that.houseMoney = res.data.tbCommissionRuleEntity;
          }
          that.num = {
            look: res.data.sign,
            sign: res.data.look,
            backup: res.data.backup,
            has: parseInt(res.data.collectStatus)
          };
          //   that.$set(that.houseInfo, "img", JSON.parse(res.data.housesImgurl)[0]);
        })
        .catch(err => {});
    },
    // 楼盘报备
    cutHotes() {
      this.notes = !this.notes;
    },
    // 楼盘动态
    toHouseInfo(url) {
      this.setCache("houseInfo", this.houseInfo);
      this.$router.push({
        path: `/${url}`
      });
    },
    // 获取楼盘动态
    getList(id) {
      let that = this;
      this.http
        .get("housesdynamic/list", {
          page: 1,
          limit: 1,
          housesCode: id
        })
        .then(res => {
          that.totalPageList = res.data.totalPage;
          that.dynamicList = res.data.list;
        })
        .catch(err => {});
    },
    // 添加楼盘收藏
    addHousescollect() {
      let that = this;
      this.http
        .post("housescollect/save", {
          housesCode: that.$route.params.id
        })
        .then(res => {
          if (res.code === 0) {
            that.layer("取消收藏", "b");
            that.num["has"] = false;
          } else {
            that.num["has"] = true;
          }
        });
    },
    /**
     * 请求客户列表
     * has true=加载更多
     */
    getClientList(has = false) {
      let that = this;
      this.http
        .get("client/list", {
          page: 1,
          limit: 1000
        })
        .then(res => {
          let arr = [];
          res.data.list.forEach(it => {
            arr.push(it.clientName);
          });
          this.clientList = res.data.list;
          that.slots[0].values = arr;
        })
        .catch(res => {});
    },
    // 选择客户报备人
    onValuesChange(picker, values) {
      let that = this;
      for (let i = 0; i < that.clientList.length; i++) {
        if (that.clientList[i].clientName == values[0]) {
          that.client["clientCode"] = that.clientList[i].clientCode;
          that.client["clientName"] = values[0];
          break;
        }
      }
    },
    //判断是否可以报备
    hasSave() {
      let that = this;
      if (!that.client["clientCode"]) {
        that.client["clientCode"] = that.clientList[0].clientCode;
        that.client["clientName"] = that.clientList[0].clientName;
      }
      this.http
        .post("userandclient/isNotBackup", {
          houseCode: that.$route.params.id
          // clientCode: that.client["clientCode"],
          // clientName: that.client["clientName"]
        })
        .then(res => {
          // console.log(JSON.stringify(res) + "是否报备");
          if (res.code) {
            that.cutHotes();
          } else {
            that.addSave();
          }
        });
    },
    // 添加报备
    addSave(code, name) {
      let that = this;
      this.showPicker = false;
      if (!that.client["clientCode"]) {
        that.client["clientCode"] = that.$route.query.userCode;
        that.client["clientName"] = that.$route.query.userName;
      }
      let lookTimes = this.toDate(this.pickerValue);
      this.http
        .post("userandclient/save", {
          houseCode: that.$route.query.houseCode,
          clientCode: that.client["clientCode"],
          clientName: that.client["clientName"],
          lookTimes
        })
        .then(res => {
          that.notes = false;
          if (res.code) {
            // that.cutHotes();
          } else {
            // that.layer("报备成功", "m");
            that.alert("报备成功。现在就去客户详情扫码带看吧！");
          }
        });
    },
    // 获取户型图
    getHouseImgs(housesCode) {
      let that = this;
      this.http
        .get("housesimg/list", {
          page: 1,
          limit: 100,
          housesCode
        })
        .then(res => {
          that.houseImgs = res.data.list;
        });
    },
    //我要推广
    extendCode() {
      this.$store.commit("houseInfo", {
        code: `http://kkf.youwenyuedu.com/#/houses_info?qrCode=1&houseCode=${
          this.houseInfo.housesCode
        }&userCode=${this.getCache("userInfo").userCode}`,
        name: this.houseInfo.housesName,
        img: this.houseInfo.housesImgurl
      });
      this.toRouter("extend");
    },
    // 获取房源列表
    getHouseList(has = false) {
      let that = this,
        page = 0;
      if (!has) this.page = 0;
      page = this.hasPage(has); //需要分页
      if (!page) return;
      this.http
        .get("houses/list", {
          page,
          limit: 2, //that.limit
          lng: that.getCache("point").lng || null,
          lat: that.getCache("point").lat || null
        })
        .then(res => {
          that.totalPage = res.totalPage;
          if (has) {
            that.houseList.push(res.data.list);
          } else {
            that.houseList = res.data.list;
          }
        });
    },
    // 绑定上下级关系
    bindingUser(firstUserCode) {
      let that = this;
      this.http
        .post("user/addFirstUser", {
          firstUserCode
        })
        .then(res => {
          // 查看用户是否 绑定手机号
          that.http.get("user/userInfo").then(res => {
            if (!res.data.mobile) {
              this.toRouter("user_info", { id: 1 });
            }
          });
        });
    }
  }
};
</script>
